<%--
  Created by IntelliJ IDEA.
  User: 123
  Date: 2020/11/30
  Time: 19:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>

<!-- 添加的form表单 -->
<form class="layui-form" id="addForm" style="display: none;padding: 10px 10px 0 0">
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-inline">
            <input type="text" style="display: none" value="1" name="tId">
            <input type="text" name="tTitleName" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">截止时间</label>
        <div class="layui-input-inline">
            <input type="date" name="tStopTime" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选项</label>
        <div class="layui-input-inline">
            <input type="text" name="oNd" placeholder="请输入" autocomplete="off" class="layui-input" value="1" style="display: none">
            <input type="text" name="oName" placeholder="请输入" autocomplete="off" class="layui-input">
            <input type="text" name="oName2" placeholder="请输入" autocomplete="off" class="layui-input">
            <input type="text" name="oName3" placeholder="请输入" autocomplete="off" class="layui-input">
            <input type="text" name="OtitleId" placeholder="请输入" autocomplete="off" class="layui-input" value="3" style="display: none">
           <%-- <input type="text" name="b.options." placeholder="请输入" autocomplete="off" class="layui-input">--%>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!-- 投票的form表单 -->
<form class="layui-form" id="addVoteForm" style="display: none;padding: 10px 10px 0 0">
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-inline">
            <div class="layui-form-mid" id="title">你最喜欢的歌手</div>
            <input type="text" value="1" name="recordId" hidden="hidden">
            <input type="text" value="${sessionScope.user.userId}" name="userId" hidden="hidden">
            <input type="text" value="" name="titleId" id="titleId" hidden="hidden" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选项</label>
        <div class="layui-input-block" id="option1">
          <%--  <input type="radio" name="xx" value="" title="周杰伦" checked>
            <input type="radio" name="xx" value="" title="张三" >
            <input type="radio" name="xx" value="" title="李四" >
            <input type="radio" name="xx" value="" title="王五" >--%>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="go">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!-- 查看投票的form表单 -->
<form class="layui-form" id="showVoteForm" style="display: none;padding: 10px 10px 0 0">
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-inline">
            <div class="layui-form-mid" id="title2">你最喜欢的歌手</div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选项</label>
        <div class="layui-input-block" id="option2">
            <div class="layui-form-mid">周杰伦:1票</div>
            <div class="layui-form-mid">张三:2票</div>
            <div class="layui-form-mid">李四:3票</div>
            <div class="layui-form-mid">王五:3票</div>
        </div>
    </div>

</form>

<div>
    <button class="layui-btn" id="addBtn">添加</button>
</div>

<table id="demo" lay-filter="myTableFilter"></table>

<script type="text/html" id="toolbar1">
    <a class="layui-btn layui-btn-xs" lay-event="test1">参与投票</a>
    <a class="layui-btn layui-btn-xs" lay-event="test2">查看投票结果</a>
</script>

<script>
    layui.use(['table','form','layer'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer=layui.layer;
        //第一个实例
        table.render({
            elem: '#demo'
            ,url: 'titles' //数据接口
            ,page: true //开启分页
            ,limit:3
            ,limits:[2,4,6]
            ,cols: [[ //表头
                {field: 'titleId', title: '编号'}
                ,{field: 'titleName', title: '标题'}
                ,{field: 'count', title: '投票人数'}
                ,{field: 'stopTime', title: '截止时间'}
                ,{ title: '操作',toolbar:'#toolbar1'}
            ]]
        });


        table.on('tool(myTableFilter)',function (obj) {
            var data= obj.data;
            $("#titleId").val(data.titleId)
            $("#title").html(data.titleName)
            $("#title2").html(data.titleName)
            if(obj.event == 'test1'){
                //发送ajax请求获取数据
                $.ajax({
                    url:"options/"+data.titleId,
                    success:function (date) {
                        var html=""
                        for(var a=0;a<date.length;a++){
                            console.log(date[a].optionName)
                            html += "<input type='radio' name='optionId' title='"+date[a].optionName+"' value='"+date[a].optionId+"' />";
                        }





                        $("#option1").html(html)
                        form.render();
                    }
                })

                layer.open({
                    type:1,
                    content:$("#addVoteForm"),
                    area:['500px','450px'],
                    title:'参与投票'
                })

            }else if(obj.event == 'test2'){

                $.ajax({
                    url: "Options/"+data.titleId,
                    success: function (date) {
                        var html = ""
                        for (var a = 0; a < date.length; a++) {
                            console.log(date[a].optionName)
                            html += "<div class='layui-form-mid'>" + date[a].optionName + ":" + date[a].count + "票<div>";
                        }
                        $("#option2").html(html)
                        form.render();
                    }
                })
                layer.open({
                    type:1,
                    content:$("#showVoteForm"),
                    area:['500px','450px'],
                    title:'查看投票结果'
                })

            }

        })

        $("#addBtn").click(function () {
            layer.open({
                type:1,
                content:$("#addForm"),
                area:['500px','450px'],
                title:'添加'
            })
        })
        form.on('submit(go)', function(data){
            var  field=data.field
            console.log(field.optionId)
            if (field.optionId==undefined){
                layer.msg("请选择选项")
            }else {
                $.ajax({
                    url: "Records",
                    contentType: "application/json",
                    data: JSON.stringify(field),
                    type: "post",
                    success: function () {
                        layer.closeAll();
                        // $("#addVoteForm").get(0).reset;
                        table.reload("demo")
                    }
                })
            }
            return false; //
        });
        form.on('submit(addSubmit)', function(data){
            var  field=data.field
            console.log(field)
            $.ajax({
                url:"Btos",
                contentType:"application/json",
                data:JSON.stringify(field),
                type:"post",
                success:function () {
                    layer.closeAll();
                     $("#addForm").get(0).reset;
                    table.reload("demo")
                }
            })
            return false; //
        });
    });


</script>

</body>
</html>
